<template>
    <div class="container-swiper">
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./images/1.jpg" alt=""></div>
                <div class="swiper-slide"><img src="./images/2.jpg" alt=""></div>
                <div class="swiper-slide"><img src="./images/3.jpg" alt=""></div>
                <div class="swiper-slide"><img src="./images/4.jpg" alt=""></div>
            </div>
            <!-- 如果需要导航按钮 -->
            <div class=" swiper-button swiper-button-prev"></div>
            <div class=" swiper-button swiper-button-next"></div>
        </div>
    </div>
</template>

<script>
import Swiper from 'swiper'
export default {
    name:'HomeSwiper',
    mounted() {
        new Swiper ('.swiper', {
            direction: 'horizontal', // 垂直切换选项
            loop: true, // 循环模式选项
            loopedSlides : 3,
            mousewheel: true,
            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            effect : 'coverflow',
            slidesPerView: 1,
            centeredSlides: true,
            coverflowEffect: {
                rotate: 0,
                stretch: 50,
                depth: 600,
                modifier: 2,
                slideShadows : true
            },
        }) 
    }
    

}
</script>

<style lang="less" scoped>
.container-swiper{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    .swiper {
        width: 600px;
        height: 400px;
        position: relative;
        .swiper-wrapper{
            & img{
                background-size: cover;
                background-repeat:no-repeat ;
                width: 100%;
                height: 100%;
            }
            .swiper-slide{
                filter: blur(4px);
            }
            .swiper-slide-active{
                filter: blur(0px);
            }
        }
        .swiper-button{
            color:white ;
        }
    }  
}

</style>